<template>
    <a-form ref="form" :form.sync="formObj">
        <a-table :columns="cols" :dataSource="value" bordered>
            <template v-for="col in field.props.columns" :slot="col.dataIndex" slot-scope="text">
                {{ text }}
            </template>
            <template slot="action" slot-scope="record">
                <a @click="handleEdit(record)">编辑</a>
                <a-divider type="vertical" />
                <a @click="handleDelete(record)">删除</a>
            </template>
        </a-table>
        <form-modal ref="modal"></form-modal>
    </a-form>
</template>
<script>
import FormItem from './FormItem';
import FormModal from './FormModal';
export default {
    name: 'FormTable',
    components: { FormItem, FormModal },
    provide() {
        return {
            update: this.handleUpdate
        };
    },
    inject: ['castRule'],
    props: {
        value: {
            type: Array,
            required: true
        },
        field: {
            type: Object,
            required: true
        }
    },
    data() {
        return {
            data: this.value,
            formObj: this.$form.createForm(this)
        };
    },
    computed: {
        cols() {
            return [
                ...this.field.props.columns,
                {
                    title: '操作',
                    scopedSlots: {
                        customRender: 'action'
                    }
                }
            ];
        }
    },
    methods: {
        handleEdit(row) {
            this.$refs.modal.show(this.field.formlist.dataFormId, row);
        },
        handleDelete(row) {
            const _this = this;
            let index = this.data.findIndex(item => item === row);
            this.$confirm({
                title: '操作确认',
                content: `您确定删除这条数据吗？`,
                okText: '确定',
                okType: 'danger',
                cancelText: '取消',
                centered: true,
                onOk() {
                    _this.data.splice(index, 1);
                }
            });
        },
        handleUpdate(data) {
            console.info('form table row update', data);
        }
    }
};
</script>
<style lang="scss" scoped></style>
